<!-- 开户行新增编辑模态框 -->
<template>
    <el-dialog :title="title" :visible.sync="show" width="70%" @close="$emit('update:visible', false)">
        <el-form :model="form" :rules="rules" label-width="140px" label-position="left" ref="accounForm" >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="开户行：" prop="openingBank">
                        <el-input v-model.trim="form.openingBank" :disabled="true" autocomplete="off">
                             <el-button slot="append" type="primary" @click="bankShow = true">选择</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开户账号：" prop="bankAccount">
                        <el-input v-model.trim="form.bankAccount" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联行号：" prop="bankNumber">
                        <el-input v-model.trim="form.bankNumber" :disabled="true" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行所属省/市：" prop="accountAdd">
                        <div class="flex-box">
                            <el-form-item prop="openingBankProvince">
                                <el-input v-model.trim="form.openingBankProvince" :disabled="true" placeholder="省" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item prop="openingBankCity">
                                <el-input v-model.trim="form.openingBankCity" :disabled="true" placeholder="市" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开户名称：" prop="bankName">
                        <el-input v-model.trim="form.bankName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="账户类别：" prop="typeName" >
                        <el-select v-model.trim="form.typeName" :clearable="true" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                                </el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="地区代码信息：" prop="bankAreaCode">
                        <el-input  disabled autocomplete="off" v-model="form.bankAreaCode"></el-input>
                    </el-form-item>
                    <el-form-item label="用途" prop="apply">
                        <el-input v-model.trim="form.apply" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
          
        </el-form>
          <template slot="footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="save('accounForm')">确 定</el-button>
        </template>
         <b-modal 
            :visible.sync='bankShow' 
            @onSave='editBank'>
        </b-modal>
    </el-dialog>
</template>
<script>


import api from '@/api/apiPath'
import bankBranchModal from './bankBranchModal'
export default {
    components: {
        'b-modal':bankBranchModal
    },
	data () {
		return {
            bankShow:false,
            form:{
                openingBank:'',
                openingBankCity:'',
                openingBankProvince:'',
                bankNumber:'',
                bankAreaCode:'',
                typeName:'',
                apply:'',
                bankAccount:'',

            },
            title:"新增开户行",
            show:false,
            typeOptions:[
                {label:"支出类",value:"1"},
                {label:"收入类",value:"2"},
            ],

            rules: {
                openingBank: [
                    { required: true, message: '请输入开户行', trigger: 'blur' },
                    { min: 0, max: 30, message: '长度不得超过30个字符', trigger: ['blur', 'change'] }
                ],
                bankAccount: [
                    {  required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback)=>{
                        const reg = /^[0-9]\d*$/;
                        if(!value){
                            callback(new Error("请输入开户账号"))
                        }else if(!reg.test(value)){
                             callback(new Error("请输入正确格式的银行账号"))
                        }else{
                            callback()
                        }
                    }}
                ],
                bankNumber: [
                     { required: true, message: '请输入联行号', trigger: 'blur' },
                ],
                accountAdd: [
                     {type:"array" ,required: true ,message:" ",validator:(rule, value, callback)=>{
                        
                       if(this.form.openingBankProvince && this.form.openingBankCity ){
                           callback()
                       }else{
                           callback(new Error(""))
                       }
                     }}
                ],  
                bankName: [
                     { required: true, message: '请输入开户行名称', trigger: ['blur', 'change']  },
                     { min: 0, max: 30, message: '长度不得超过30个字符', trigger: ['blur', 'change'] }
                     
                ],
                bankAreaCode: [
                      { required: true, trigger: ['blur',] ,validator: (rule, value, callback)=>{
                       callback();
                    }}
                     
                ],
                apply: [
                     { required: true, message: '请输入用途', trigger: ['blur', 'change']  },
                     { min: 0, max: 50, message: '长度不得超过50个字符', trigger: ['blur', 'change'] }
                     
                ],
                openingBankProvince: [
                   { required: true, message: '请选择省份', trigger: ['blur'] }
                ],
                openingBankCity: [
                   { required: true, message: '请选择城市', trigger: ['blur'] }
                ],
                typeName: [
                   { required: true, message: '请选择账号类别', trigger: ['blur']}
                ]
            }
            
        }
    },
    props:["visible","type",'editform'],
    watch:{
        visible(o,n){
            if(o){
                this.show = true;
               this.init();
            }else{
                  this.show = false;
            }
        }
    },
    methods:{
        editBank(val){
            ({
                bankBranchName:this.form.openingBank,
                cityName:this.form.openingBankCity,
                provinceName:this.form.openingBankProvince,
                linkNumber:this.form.bankNumber,
                openCode:this.form.bankAreaCode,
            } = val)
        },
        init(){
             if(this.type == 'edit'){
                this.title = '编辑开户行'
                this.form = this.editform;
            }else{
                this.title = '新增开户行'
               
                if(this.$refs['accounForm']){
                    this.$refs['accounForm'].resetFields();
                }
            } 
            
            
        },
          save(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.show = false;
                   _this.$emit('onSave',JSON.parse(JSON.stringify(this.form)))
                } else {
                    return false;
                }
            });
        },
    },
    
	created () {
        
    },
	destroyed() {
		
	},
	filters: {

	}
}

</script>

<style lang="stylus" scoped>
     .flex-box{
        display:flex;
    }
    .flex-box>*{
        margin-right :10px;
    }
    .flex-box>*:last-child{
         margin-right:0;
    }
</style>
